{% extends 'base_head.html' %}

{% block title %}Подтверждение заказа{% endblock %}
{% block content %}
        <div class="px-4 px-lg-0">
            <div class="container text-white py-5 text-center">
                <h1 class="display-4">Order Confirmation</h1>
            </div>

            <div class="pb-5">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 pt-0 pb-5 px-5 bg-white rounded shadow-sm mb-5">
                            <div class="table-responsive">
                                <div class="container text-dark py-5 text-center">
                                    <img src="{% static 'images/checkmark.png' %}" height="100px"alt="">
                                    <h2 class="display-4">Спасибо за ваш заказ!</h2>
                                    <p><strong>Заказ #{{order.id}}</strong></p>
                                    <!-- <p>A copy of your receipt has been sent to: {{order.user.email}}</p> -->
                                </div>

                                <div class="bg-light rounded-pill px-4 py-3 text-uppercase font-weight-bold">Order Status</div>
                                <div class="container text-black">
                                    <div class="col-lg-12 mt-2 mb-4">
                                        <p>
                                            {{order.status}}
                                        </p>
                                    </div>
                                </div>

                                <div class="bg-light rounded-pill px-4 py-3 text-uppercase font-weight-bold">Delivery Details</div>
                                <div class="container text-black">
                                    <div class="col-lg-6 mt-3 mb-4">
                                        <h5>Адрес доставки:</h5>
                                        <p>
                                            {{order.user.first_name}} {{order.user.last_name}}<br>
                                            {{order.user.address.address}} {{order.user.address.address2}}<br>
                                            {{order.user.address.city}}, {{order.user.address.state}} {{order.user.address.zipcode}}
                                        </p>
                                    </div>
                                </div>

                                <div class="bg-light rounded-pill px-4 py-3 text-uppercase font-weight-bold">Billing Details</div>
                                <div class="container text-black">
                                    <div class="col-lg-6 mt-3">
                                        <h5>Адрес оплаты:</h5>
                                        <p>
                                            {{order.credit_card.first_name}} {{order.credit_card.last_name}}<br>
                                            {{order.credit_card.address.address}} {{order.credit_card.address.address2}}<br>
                                            {{order.credit_card.address.city}}, {{order.credit_card.address.state}} {{order.credit_card.address.zipcode}}
                                        </p>
                                    </div>
                                    <div class="col-lg-6 mb-4">
                                        <h5>Данные кредитной карты:</h5>
                                        <p>
                                            Номер кредитной карты заканчивается на: {{cc_last_digits}}<br>
                                            Срок действия: {{cc_expiration_date}}<br>
                                        </p>
                                    </div>
                                </div>
                                <div class="bg-light rounded-pill px-4 py-3 text-uppercase font-weight-bold">Order summary </div>
                                    <table class="table">
                                        <tbody>
                                            {% for item in order.cart.cart_items.all %}
                                            <tr>
                                                <th scope="row">
                                                    <div class="p-2">
                                                        <img src="{{item.shoe.color.image.url}}" alt="" width="70" class="img-fluid rounded shadow-sm">
                                                        <div class="ml-3 d-inline-block align-middle">
                                                            <h5 class="mb-0"> <a href="/shoe/{{item.shoe.color.id}}" class="text-dark d-inline-block align-middle">{{item.shoe.color.model.brand.name}} {{item.shoe.color.model.model}}</a></h5><span class="text-muted font-weight-normal font-italic d-block">Size: {{item.shoe.size}}</span>
                                                        </div>
                                                    </div>
                                                </th>
                                                <td class="align-middle">Расцветка: <strong>{{item.shoe.color.color}}</strong></td>
                                                <td class="align-middle"><strong>${{item.shoe.color.model.price}}</strong></td>
                                                <td class="align-middle">Кол-во: {{item.quantity}}</strong></td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                
                                    <ul class="list-unstyled mb-4">
                                        <li class="d-flex justify-content-between px-4 py-3 border-bottom">
                                            <strong class="text-muted">Предварительная сумма заказа </strong><strong>${{order.cart.total}}</strong>
                                        </li>
                                        <li class="d-flex justify-content-between px-4 py-3 border-bottom">
                                            <strong class="text-muted">Доставка: </strong><strong>FREE</strong>
                                        </li>
                                        <!-- <li class="d-flex justify-content-between px-4 py-3 border-bottom">
                                            <strong class="text-muted">Tax</strong><strong>$0.00</strong>
                                        </li> -->
                                        <li class="d-flex justify-content-between px-4 py-3 border-bottom">
                                            <strong class="text-muted">Итого: </strong>
                                            <h5 class="font-weight-bold">${{order.cart.total}}</h5>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}